{{ header }}
<div class="container">
  <header>
    <div class="row">
      <div class="col-sm-6">
        <h1 class="pull-left">4<small>/4</small></h1>
        <h3>{{ heading_title }}<br>
          <small>{{ text_step_4 }}</small></h3>
      </div>
      <div class="col-sm-6">
        <div id="logo" class="pull-right hidden-xs"><img src="view/image/logo.png" alt="MyCnCart" title="MyCnCart" /></div>
      </div>
    </div>
  </header>
  {% if success %}
  <div class="alert alert-success alert-dismissible">{{ success }}</div>
  {% endif %}
  <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
    <button type="button" class="close" data-dismiss="alert">&times;</button>
  </div>
  <div class="visit">
    <div class="row">
      <div class="col-sm-5 col-sm-offset-1 text-center">
        <p><i class="fa fa-shopping-cart fa-5x"></i></p>
        <a href="../" class="btn btn-secondary">{{ text_catalog }}</a></div>
      <div class="col-sm-5 text-center">
        <p><i class="fa fa-cog fa-5x white"></i></p>
        <a href="../admin/" class="btn btn-secondary">{{ text_admin }}</a></div>
    </div>
  </div>
  <div class="modules">
    <div class="row">
      <div class="col-sm-12 text-center"><a href="http://www.mycncart.com" target="_BLANK" class="btn btn-default">{{ text_extension }}</a></div>
    </div>
  </div>
  <div class="mailing">
    <div class="row">
      <div class="col-sm-12"><i class="fa fa-envelope-o fa-5x"></i>
        <h3>{{ text_mail }}<br>
          <small>{{ text_mail_description }}</small></h3>
        <a href="http://www.mycncart.com" target="_BLANK" class="btn btn-secondary">{{ button_mail }}</a></div>
    </div>
  </div>

  <div class="support text-center">
    <div class="row">
      <div class="col-sm-4"><a href="http://www.weibo.com/mycncart" class="icon transition"><i class="fa fa-weibo fa-4x"></i></a>
        <h3>{{ text_weibo }}</h3>
        <p>{{ text_weibo_description }}</p>
        <a href="http://www.weibo.com/mycncart">{{ text_weibo_visit }}</a></div>
      <div class="col-sm-4"><a href="http://www.mycncart.cn" class="icon transition"><i class="fa fa-comments fa-4x"></i></a>
        <h3>{{ text_forum }}</h3>
        <p>{{ text_forum_description }}</p>
        <a href="http://www.mycncart.cn">{{ text_forum_visit }}</a></div>
      <div class="col-sm-4"><a href="http://www.mycncart.com" class="icon transition"><i class="fa fa-user fa-4x"></i></a>
        <h3>{{ text_commercial }}</h3>
        <p>{{ text_commercial_description }}</p>
        <a href="http://www.mycncart.com" target="_BLANK">{{ text_commercial_visit }}</a></div>
    </div>
  </div>
</div>
{{ footer }}
<script type="text/javascript"><!--
$(document).ready(function() {
	$.ajax({
		url: '{{ extension }}',
		type: 'post',
		dataType: 'json',
		success: function(json) {
			if (json['extensions']) {
				html  = '';

				for (i = 0; i < json['extensions'].length; i++) {
					extension = json['extensions'][i];

					html += '<div class="col-sm-6 module">';
					html += '  <a class="thumbnail pull-left" href="' + extension['href'] + '"><img src="' + extension['image'] + '" alt="' + extension['name'] + '" /></a>';
					html += '  <h5>' + extension['name'] + '</h5>';
					html += '  <p>' + extension['price'] + ' <a target="_BLANK" href="' + extension['href'] + '">{{ text_view }}</a></p>';
					html += '  <div class="clearfix"></div>';
					html += '</div>';

					i++;
				}

				$('#extension').html(html);
			} else {
				$('#extension').fadeOut();
			}
		}
	});
});
//--></script>
